<template>
	<view class="content" style="padding-top: 20rpx;height: 100vh;background-color: #efefef;">
		<view class="mian">
			<view class="dis_f aic jub fs28 c6 mt20">
				<text>订单号： </text>
				<text>{{datas.order_sn}}</text>
			</view>
			<view class="dis_f aic jub fs28 c6 mt10" style="border-bottom: 1px solid #EFEFEF; padding-bottom: 30rpx;">
				<text>支付时间： </text>
				<text>{{datas.addtime}}</text>
			</view>

			<view class="mt30 mb40">
				<u-steps :current="typesta" dot='true' active-color="#feb746" inactive-color="#bdbdbd">
					<u-steps-item title="已付款"></u-steps-item>
					<u-steps-item title="已完成"></u-steps-item>
				</u-steps>

			</view>
		</view>
		<view class="mian mt20">
			<view class="dis_f  " style="border-bottom: 1px solid #EFEFEF; padding-bottom: 230rpx;" @click="goodscli">
				<image :src="datas.submsg.img" mode="aspectFill" class="lisrimg"></image>
				<view class="ml20" style="width: 82%;">
					<view class="fs28 oh1">
						{{datas.submsg.main_title}}
					</view>
					<view class="dis_f aic jub mt10">
						<view class="fs24 " style="color: #f6b542;" v-if="datas.goods_type == 1">
							送{{datas.ze}}积分
						</view>
						<view class="fs24 " style="color: #f6b542;" v-if="datas.goods_type == 2">
							送{{datas.ze}}元
						</view>
						<view class="fs24 cred">
							￥{{datas.submsg.selling_price}}
						</view>
					</view>
				</view>
			</view>
			<view class="dis_f aic jub mt20 ">
				<view class="">
					
				</view>
				<view class="dis_f  fdc" style="align-items: flex-end;">
					<view class=" mt20">
						<text class="fs24">余额抵扣</text>
						<text class="fs26 cred">￥{{datas.pay_price1}}</text>
					</view><view class=" mt20">
						<text class="fs24">实际支付</text>
						<text class="fs26 cred">￥{{datas.pay_price2}}</text>
					</view>
					<view class=" mt20">
						<text class="fs28">合计</text>
						<text class="fs32 cred">￥{{datas.total_price}}</text>
					</view>
				</view>
				
			</view>
		</view>
		<view class="mt10 dis_f aic jub mian" v-if="datas.goods_type == 1">
			<view class="fs28">
				新卡:
			</view>
			<text class="fs24" v-if="datas.is_newcard == 1">是</text>
			<text class="fs24" v-if="datas.is_newcard == 0">否</text>
		</view>
		<view class="mt10 dis_f aic jub mian" v-if="datas.goods_type == 1 &&(( datas.is_newcard == 1 && datas.status == 4)||(datas.is_newcard == 0))">
			<view class="fs28">
				卡号:
			</view>
			<text class="fs24">{{datas.card_sn}}</text>
		</view>
		<view class="dis_f aic jub">
			<view class="dis_f aic juc btnsub mr20" style="background: #CACACA !important;" v-if="datas.status == 0 "
				@click="quxiao">
				取消订单
			</view>
			<view class="dis_f aic juc btnsub mr20" v-if="datas.status == 0" @click="zhifu">
				立即支付
			</view>
			<button type="default" open-type="contact" class="dis_f aic juc btnsub mr20" v-if="datas.status != 0">
				<view>
					联系客服
				</view>
			</button>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				status: 0,
				typesta: 0,
				id: '',
				datas: "",
				code: ""
			}
		},
		onLoad(option) {
			this.id = option.id
			this.postlist()

		},
		methods: {
			goodscli() {
				uni.navigateTo({
					url: '/pagesA/in_details/in_details?id=' + this.datas.submsg.goods_id
				})
			},
			zhifu() {
				let that = this
				wx.login({
					success: async (res) => {
						that.code = res.code
						uni.setStorageSync("code", res.code);
						that.api.post('order/getorderpay', {
							id: that.id,
							code: that.code
						}).then(res => {
							console.log(res);
							if (res.code == 200) {
								uni.requestPayment({
									provider: 'wxpay', // 服务提提供商
									timeStamp: res.data.timeStamp, // 时间戳 142326201502031615
									nonceStr: res.data.nonceStr, // 随机字符串
									package: res.data.package,
									signType: res.data.signType, // 签名算法
									paySign: res.data.paySign, // 签名
									success: function(res) {
										console.log('支付成功', res);
										uni.showToast({
											title: '支付成功',
											icon: "none"
										})
										setTimeout(function() {
											uni.navigateBack(1)
										}, 1000)
										// 业务逻辑。。。
									},
									fail: function(err) {
										console.log('支付失败', err);
									}
								});
							}


						})
					}
				})


			},
			queren() {
				this.api.post('order/orderqrsh', {
					id: this.id,
				}).then(res => {
					console.log(res);
					if (res.code == 200) {
						uni.showToast({
							title: '签收完成',
							icon: "none"
						})
						setTimeout(function() {
							uni.navigateBack(1)
						}, 1000)
					}


				})
			},
			quxiao() {
				this.api.post('order/orderCancel', {
					id: this.id,
				}).then(res => {
					console.log(res);
					if (res.code == 200) {
						uni.showToast({
							title: '取消成功',
							icon: "none"
						})
						setTimeout(function() {
							uni.navigateBack(1)
						}, 1000)
					}


				})
			},
			postlist() {

				this.api.post('order/orderdetails', {
					id: this.id,
				}).then(res => {
					console.log(res);
					if (res.code == 200) {
						this.datas = res.data
						// if (this.datas.status == 3) {
						// 	this.typesta = 2
						// } else {
						if (this.datas.status == 0) {
							this.typesta = -1
						}
						if (this.datas.status == 1 || this.datas.status == 2 || this.datas.status == 3) {
							this.typesta = 0
						}
						if (this.datas.status == 4) {
							this.typesta = 2
						}
						// }
					}


				})
			},
			jump() {
				uni.redirectTo({
					url: '/pagesA/my_user_subcomment/my_user_subcomment?type=' + 0 + '&id=' + this.id
				})
			},
		}
	}
</script>

<style>
	.btnsub {
		font-size: 30rpx;
		font-family: Adobe Heiti Std;
		font-weight: normal;
		color: #FFFFFF !important;
		width: 92%;
		margin-left: 30rpx;
		height: 75rpx;
		background: #feb746 !important;
		border-radius: 15rpx;
		margin-top: 120rpx;
	}

	.lisrimg {
		width: 102rpx;
		height: 102rpx;

		border-radius: 10rpx;
	}

	.mian {
		background-color: #fff;
		padding: 25rpx;
		box-sizing: border-box;
	}
</style>